import React from 'react';
import ReactDOM from 'react-dom';

// import React from './lib/react';
// import ReactDOM from './lib/react-dom';


/**
 * 高阶组件,可以实现属性的代理,给组件添加额外属性,
 * 实现特定逻辑等,复用
 * 
 * @param {*} OldComponent 组件对象
 * @returns 
 */
const withLoading = (OldComponent) => {
  return class extends React.Component {
    render() {
      const state = {
        show() {
          console.log('show');
        },
        hide() {
          console.log('hide');
        }
      }
      return (
        <OldComponent {...this.props} {...state}/>
      )
    }
  }
}

class Hello extends React.Component {

  render() {
    return (
      <div>
        <p>Hello World</p>
        <button onClick={this.props.show}>show</button>
        <button onClick={this.props.hide}>hide</button>
      </div>
    )
  }
}

const LoadingHello = withLoading(Hello);

ReactDOM.render(
  <LoadingHello />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",